<template>
  <div id="StaffInfoList">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">基础数据</strong></a>
          <span>/</span>
        </li>
        <li><strong>员工信息管理</strong><span>/</span></li>
        <li><strong>员工信息列表</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;padding-right: 20px;">
        <div style="padding: 20px 20px 30px 20px">
          <span style="font-size: 30px;font-weight: bolder">员工信息列表</span>
          <router-link to="CreateStaffInfo"  class="btn btn-success" style="float: right;margin-top: 10px">新建员工信息</router-link>
        </div>

        <form action="">
          <div class="row" style="margin-bottom: 30px">
            <div class="col-sm-1 col-md-1"></div>
            <div class="col-sm-2 col-md-2 text-center" style="padding: 0px">
              <h4>姓名:</h4>
            </div>
            <div class="col-sm-3 col-md-3">
              <input v-model="voQuery.staffName" class="form-control" placeholder="请输入员工的名称" style="width: 180px;">
            </div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>职位:</h4>
            </div>
            <div class="col-sm-3 col-md-3">
              <select v-model="voQuery.role" class="form-control" style="width: 180px">
                <option value="" >-全部-</option>
                <option v-for="item in roles" :value=" item.role ">{{ item.role }}</option>
              </select>
            </div>
            <div class="col-sm-2 col-md-2">
              <button @click="loadStaffs" class="btn btn-primary">查询</button>
            </div>
          </div>
        </form>

        <table class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>职位</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(staff,index) in staffs">
            <th scope="row">{{index+1+(current-1)*limit}}</th>
            <td>{{staff.staff.staffName}}</td>
            <td>{{staff.staff.staffSex==1 ? '男' : '女'}}</td>
            <td>{{staff.staff.staffTel}}</td>
            <td>
              <span v-for="role in staff.roles">{{role}} </span>
            </td>
            <td>{{staff.staff.staffState}}</td>
            <td>
              <button @click="toUpdateStaff(staff.staff.staffId)" class="btn btn-default btn-sm">编辑</button>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="block text-center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>

    </article>
  </div>
</template>

<script>
export default {
  name: "StaffInfoList",
  data(){
    return{
      currentPage: 1,
      limit:10,
      current:1,
      total:0,
      roles:[],
      voQuery:{
        staffName:'',
        role:''
      },

      staffs:[]
    }
  },methods:{
    loadStaffs(){
      this.$axios.get('staff/allStaffsByVo',
        {
        params:{
          current:this.current,
          limit:this.limit,
          role:this.voQuery.role,
          staffName:this.voQuery.staffName,
        }
      }
      ).then(
        res=>{
          this.total = res.data.data.total
          this.staffs = res.data.data.myData
        })
    },
    handleSizeChange(val) {
      this.limit = val;
      this.loadStaffs()
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadStaffs()
    },
    showRole(){
      this.$axios.get("/role/loadAllRoleName").then(
        res =>{
          this.roles = res.data.data.AllRoles;
        }
      )
    },
    toUpdateStaff(staffId){
      this.$router.push({path:'/MemuBar/UpdateStaffInfo',query: {staffId:staffId}})
    }
  },created() {
    this.showRole();

  },mounted(){
    this.loadStaffs();
  }
}
</script>

<style scoped>

</style>
